import React, { Component } from 'react'
import { DatePicker, Space, Select, Input, Card, Pagination, Avatar } from 'antd'
import './index.less'
export default class Workforbench extends Component {
  state = {
    personInform:[
      {name:'李静', vip:3, sex:'男', age:24, madeTime:'2019-11-19 22:33:44',temp:'待接诊', house:'全科', nerse:'王子', phone:18875456421},
      {name:'李静', vip:2, sex:'男', age:24, madeTime:'2019-11-19 22:33:44',temp:'待接诊', house:'全科', nerse:'王子', phone:18875456421},
      {name:'李静', vip:1, sex:'男', age:24, madeTime:'2019-11-19 22:33:44',temp:'待接诊', house:'全科', nerse:'王子', phone:18875456421},
      {name:'李静', vip:0, sex:'女', age:24, madeTime:'2019-11-19 22:33:44',temp:'待接诊', house:'全科', nerse:'王子', phone:18875456421}
    ]
  }
  // 绘制小卡片
  _renderCards = items => {
    return items.map(item => {
      return (
        <Card style={{width:420,height:200,float:'left',borderRadius:'15px',margin:'10px 20px'}}>
          <div style={{width:42,height:42,boxShadow:'0 -3px 5px #e6e6e6',borderRadius:'50%'}}>
            <Avatar size={40} src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
          </div>
          <div className='centerItem' style={{float:'right',marginTop:'-40px',marginRight:'30px'}}>
            <div className='firstOne'>
              <span>{item.name}</span>
              <span><i>VIP{item.vip}</i></span>
              <span>{item.sex}</span>
              <span>{item.age}</span>
              <span style={{backgroundColor:'#ff6262',borderRadius:'10px',color:'white',width:50,height:22,fontSize:'13px',textAlign:'center',lineHeight:'22px',marginLeft:'5px'}}>{item.temp}</span>
            </div>
            <div className='two'>
              <span>创建时间：2019-11-17 22:22:44</span>
            </div>
            <div className="three">
              <span>科室：全科</span>&nbsp;&nbsp;&nbsp;
              <span>医生：王伟</span>
            </div>
            <div className='four'>
              <span>手机号码：188739546456</span>
            </div>
          </div>
          <div className="buttons">
            <span>接诊</span>
            <span>查看患者信息</span>
          </div>
        </Card>
      )
    })
  }
  // 绘制分页器
  _renderPage () {
    return (
      <>
        <Pagination
          total={85}
          showSizeChanger
          showQuickJumper
          showTotal={total => `Total ${total} items`}
        />
      </>
    )
  }
  render() {
    return (
      <div>
        <div className="header">
          <div className="input">
            创建时间&nbsp;&nbsp;
            <Space direction="vertical" size={12}>
              <DatePicker.RangePicker />
            </Space>
          </div>
          <div className="input">
            接诊状态&nbsp;&nbsp;
            <Select
            showSearch
            style={{ width: 200 }}
            placeholder="选择状态"
            optionFilterProp="children"
            filterOption={(input, option) =>
              option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
          >
            <Select.Option value="jack">全部</Select.Option>
            <Select.Option value="lucy">待接诊</Select.Option>
            <Select.Option value="lucy">接诊中</Select.Option>
            <Select.Option value="tom">已完成</Select.Option>
          </Select>
          </div>
          <div className="input">
            <Space direction="vertical">
              <Input.Search bordered style={{width:300}} placeholder="输入患者姓名" enterButton />
            </Space>
          </div>
        </div>
        <div>
          {
            this._renderCards(this.state.personInform)
          }
        </div>
        <div className="footer">
          {
            this._renderPage()
          }
        </div>
      </div>
    )
  }
}
